.box {
    .header {
        margin-bottom:50/7.5vw;
        height: 90/7.5vw;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >h3 {
            font-size: 48/7.5vw;
        }

        >.select-date {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60/7.5vw;
            padding: 0 24/7.5vw;
            line-height: 60/7.5vw;
            border-radius: 30/7.5vw;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 28/7.5vw;
            color: #666;
            text-align: center;
            background-color: rgba(125, 69, 197, .15);
            >input{
                flex:1;
                width: 150/7.5vw;
                height:60/7.5vw;
                line-height: 60/7.5vw;
                background-color: transparent;
            }
            >img {
                width: 24/7.5vw;
                margin-left: 10/7.5vw;
            }
        }
    }

    .num-box {
        height: 190/7.5vw;
        margin-top: 72/7.5vw;
        margin-bottom:30/7.5vw;
        border-radius: 4/7.5vw;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >div {
            flex: 1;
            text-align: center;

            &:nth-of-type(1) {
                >p {
                    color: #7D45C5;
                }
            }

            &:nth-of-type(2) {
                >p {
                    color: #E67050;
                }
            }

            >span {
                font-size: 28/7.5vw;
                color: #999;
            }
        }
    }

    .tab-box {
        margin-bottom: 30/7.5vw;

        span {
            margin-right: 80/7.5vw;
            padding: 0 20/7.5vw;
            font-size: 36/7.5vw;
            font-family: PingFangSC-Medium;

            &.active {
                border-bottom: 6/7.5vw solid #33AC8F;
            }
        }
    }

    .content-box {
        li {
            background-color: #fff;
            border-radius: 4/7.5vw;
            padding: 40/7.5vw 0;
            margin-bottom: 30/7.5vw;

            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 30/7.5vw;
                margin-bottom: 80/7.5vw;

                .right-box {
                    display: flex;
                    align-items: center;
                    width: 254/7.5vw;
                    height: 56/7.5vw;
                    border-radius: 28/7.5vw;
                    border: 2/7.5vw solid #5B4CCD;
                    overflow: hidden;

                    span {
                        width: 50%;
                        transform: rotate(20deg);
                        height: 112/7.5vw;
                        line-height: 112/7.5vw;
                        text-align: center;
                        font-size: 28/7.5vw;
                        color: #5B4CCD;

                        >i {
                            display: block;
                            transform: rotate(-20deg);
                        }

                        &.active {
                            background-color: #5B4CCD;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .chart-box {
        background-color: #fff;
        padding: 40/7.5vw 0;

        >h3 {
            padding: 0 30/7.5vw;
            margin-bottom: 80/7.5vw;
        }
    }

    .my-chart {
        position: relative;
        height: 500/7.5vw;

        .chart-child1 {
            width: 100%;
            height: 500/7.5vw;
        }

        .chart-child2 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200/7.5vw;
            height: 200/7.5vw;
        }
    }
}